<template>
  <div class="all">
    <header>
      <label>
        <button class="add-file">添加文件</button>
        <input class="file-input" type="file" @change="selectFile" />
      </label>
      <holo-searchInput @schIptVN="schIptVN" @searchBtnClick="searchBtnClick" />
    </header>
    <section>
      <file-list-tab
        :showList="showList"
        :currentPageIndex="currentPageIndex"
        @handleClickEdit="handleClickEdit"
        @handleClickDelete="handleClickDelete"
      />
      <holo-pageLimit
        class="page-limit"
        :pageConfig="pageConfigTotal"
        @changeCurrentPage="changePage"
      />
      <!-- HTML 修改功能对话框 edit dialog -->
      <f-l-dialog :width="50" :height="20" :showDialog="editDialogShow">
        <template v-slot:content>
          <div class="dialog-edit-btn">
            <span>请输入文件的新名称：</span>
            <div class="input">
              <input type="text" v-model="editData.name" @keyup.enter="editConfirmTrue" />
            </div>
            <button @click="editConfirmTrue">确认</button>
            <button @click="editConfirmFalse">返回</button>
          </div>
        </template>
      </f-l-dialog>
      <!-- 删除对话框 -->
      <f-l-dialog :showDialog="deleteDialogShow">
        <template v-slot:content>
          <div class="dialog-delete-btn">
            <span>确认删除此条数据？</span>
            <button @click="DConfirmTrue">确认</button>
            <button @click="DconfirmFalse">返回</button>
          </div>
        </template>
      </f-l-dialog>
    </section>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, toRefs } from 'vue'
import { FileListTab, FLDialog } from '@/components/fileManage'
import { useFileList } from '@/hooks/fileManage/FileList'
import { IFileListM } from '@/typing'

export default defineComponent({
  name: 'FileList',
  components: {
    FileListTab,
    FLDialog
  },
  setup() {
    const data = reactive({
      editData: {
        id: -1,
        name: ''
      },
      editDialogShow: false,
      deleteId: -1,
      deleteDialogShow: false,
      currentPageIndex: 0,
      searchValue: '',
      fileList: [],
      showList: [],
      pageConfigTotal: {
        total: 0,
        pageSize: 10,
        pageNo: 1
      }
    })

    const {
      getFileList,
      selectFile,
      changePage,
      reFreshList,
      DConfirmTrue,
      editConfirmTrue
    } = useFileList()
    // 获取数据列表 -> showList
    getFileList(data)

    const cpSearchBtnClick = computed(() =>
      data.fileList.filter((i) => (i as IFileListM).name.includes(data.searchValue.trim()))
    )
    const methods = {
      //  上传文件 重新获取数据列表
      selectFile: (e: InputEvent) => selectFile(e, data),
      //  页面改变触发
      changePage: (i: number) => changePage(i, data),
      //  当搜索框为空的时候重新获取列表
      schIptVN() {
        data.searchValue = ''
        getFileList(data)
      },
      // 点击搜索返回搜索结果
      searchBtnClick(value: string) {
        data.searchValue = value
        reFreshList(cpSearchBtnClick.value as IFileListM[], data)
      },
      // 点击表格内修改按钮
      handleClickEdit(id: number, name: string) {
        data.editData.name = name
        data.editData.id = id
        data.editDialogShow = true
      },
      // 点击对话框内修改按钮 -> 更新文件信息
      editConfirmTrue: () => editConfirmTrue(data.editData, data),
      // 修改对话框内返回按钮
      editConfirmFalse() {
        data.editDialogShow = false
      },
      // 点击表格内删除按钮
      handleClickDelete(id: number) {
        data.deleteId = id
        data.deleteDialogShow = true
      },
      // 删除对话框内删除按钮 -> 删除对应 id 文件数据
      DConfirmTrue: () => DConfirmTrue(data.deleteId, data),
      // 删除对话框内返回按钮
      DconfirmFalse() {
        data.deleteDialogShow = false
      }
    }
    return {
      ...toRefs(data),
      ...methods
    }
  }
})
</script>

<style lang="stylus" scoped>
.all
  position relative
header
  height calc(12.4vh - 1.4rem)
  padding-top calc(6.2vh - 0.7rem)
  border-bottom .2rem solid #852121
  border-radius 0 0 0 2.5rem
  text-align center
  label
    position relative
    .add-file,
    .file-input
      width 13rem
      height 4rem
      font-size 1.4rem
      vertical-align text-top
    .add-file
      outline none
      margin-right 5rem
      min-height 30px
      min-width 96px
      transform translateY(-50%)
      border 0
      box-shadow 0 .2rem .5rem #330033
      border-radius 1rem 1rem 1rem 1rem
      transition all .3s
      &:hover
        color #333399
        border-radius 5rem
        width 20rem
        box-shadow 0 .2rem .5rem #330033 inset
    .file-input
      position absolute
      left 0px
      transform translateY(-50%)
      min-height 30px
      min-width 96px
      opacity 0
.page-limit
  padding 3rem;
  text-align center
section
  padding 2rem 0 0 0
  height calc(78.5vh + 1.4rem)
  width 100%

//  删除对话框
_d-l-btn-s(c,bs) {
  color c
  border .1rem solid skyblue
  border-radius 2.5rem
  box-shadow .1rem .1rem 2rem bs inset
}
.dialog-delete-btn
  span
    display block
    width 40rem
    height 12.6rem
    padding 7rem 0 0 1rem
    font-size 2rem
    user-select none
  button
    font-size 1.3rem
    margin 2rem 1rem
    height 3.5rem
    vertical-align text-top
    width 15rem
    border none
    outline none
    text-align center
    transition  all .2s
    &:hover
      _d-l-btn-s(red,#fea455)
    &:last-child:hover
      _d-l-btn-s(blue,yellowgreen)

// 修改对话框
.dialog-edit-btn
  span
    display block
    height 6.6rem
    line-height 6.6rem
    font-size 2rem
    text-align center
  .input
    height 7rem
    text-align center
    line-height 7rem
  input
    width 32rem
    height 3rem
    border none
    font-size 1.4rem
    border-bottom .1rem solid #391863
  button
    width 13.5rem
    height 3.5rem
    vertical-align middle
    margin 1rem
    font-size 1.5rem
    vertical-align top
    border none
    outline none
    transition  all .2s
    &:hover
      _d-l-btn-s(red,#fea455)
    &:last-child:hover
      _d-l-btn-s(blue,yellowgreen)
</style>
